<template>
	<view class="viewport">
		<!-- 推荐封面图 -->
		<view class="cover">
			<image :src="bannerPicture"></image>
		</view>
		<!-- 推荐选项 -->
		<view class="tabs">
			<text
				class="text"
				v-for="(item, index) in recommendList"
				:key="item.subType.id"
				:class="{ active: index === activeIndex }"
				@click="activeIndex = index"
			>
				{{ item.subType.title }}
			</text>
			<!-- <text class="text">新品预告</text> -->
		</view>
		<!-- 推荐列表 -->
		<scroll-view
			scroll-y
			class="scroll-view"
			v-for="(item, index) in recommendList"
			:key="item.subType.id"
			v-show="index === activeIndex"
			@scrolltolower="getMore"
		>
			<view class="goods">
				<navigator
					hover-class="none"
					class="navigator"
					v-for="goods in item.goodsItems.items"
					:key="goods.id"
					:url="`/pages/goods/goods?id=`"
				>
					<image class="thumb" :src="goods.picture"></image>
					<view class="name ellipsis">{{ goods.name }}</view>
					<view class="price">
						<text class="symbol">¥</text>
						<text class="number">{{ goods.price }}</text>
					</view>
				</navigator>
			</view>
			<view class="loading-text">
				{{ item.finished ? '没有更多了~' : '正在加载...' }}
			</view>
		</scroll-view>
	</view>
</template>
<script>
import { getHotRecommendAPI } from '@/services/hot'
export default {
	data() {
		return {
			bannerPicture: '',
			recommendList: [],
			activeIndex: 0,
		}
	},
	onLoad({ type }) {
		const urlMap = {
			1: { title: '特惠推荐', url: '/home/preference/mutli' },
			2: { title: '爆款推荐', url: '/home/inVogue/mutli' },
			3: { title: '一站买全', url: '/home/oneStop/mutli' },
			4: { title: '领券中心', url: '/home/new/mutli' }, // 后端未提供，暂用新鲜好物url
			5: { title: '新鲜好物', url: '/home/new/mutli' },
		}
		// 根据类型获取当前的页面信息对象，存储在实例上
		this.currentInfo = urlMap[type]
		// 设置当前的页面标题
		uni.setNavigationBarTitle({
			title: this.currentInfo.title,
		})
		// 页面加载的时候就需要调用一次接口
		this.getRecommendData()
	},
	methods: {
		async getRecommendData() {
			// 请求数据，根据当前页面信息对象的url去请求数据
			// this.currentInfo
			const res = await getHotRecommendAPI(this.currentInfo.url) // 没有传递pageSize，默认是就是10页
			this.bannerPicture = res.result.bannerPicture
			this.recommendList = res.result.subTypes.map((item) => {
				return {
					subType: item,
					goodsItems: res.result.goodsItems[item.id],
				}
			})
			// console.log(res)
		},
		async getMore() {
			// 1、获取到当前页面上展示的这个分类的所有数据 >> 获取他的id，提交接口，判断数据是否请求完毕，拿到数据，push进去
			const currentShow = this.recommendList[this.activeIndex]
			// 2、判断数据是否请求完毕
			if (currentShow.goodsItems.page >= currentShow.goodsItems.pages) {
				// 没有更多数据了
				// 给对象新添加属性，导致新添加的这个属性不是响应式的,界面不会响应式更新
				this.$set(currentShow, 'finished', true)
				// currentShow.finished = true // 表示没有更多数据了
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
				})
				return
			}
			// 3、还有数据，继续请求 页码自增
			// currentShow.goodsItems.page++
			// 4、请求数据了
			const res = await getHotRecommendAPI(this.currentInfo.url, {
				subType: currentShow.subType.id, // 子分类
				pageSize: 100,
				page: ++currentShow.goodsItems.page,
			})
			// 请求到数据之后把最新的pages覆盖原来的数据
			currentShow.goodsItems.pages =
				res.result.goodsItems[currentShow.subType.id].pages
			// 获取到的商品数据拼接到当前子分类下面的goodsItems下面的items里面去
			currentShow.goodsItems.items.push(
				...res.result.goodsItems[currentShow.subType.id].items,
			)
			// console.log(res)
		},
	},
}
</script>
<style lang="scss">
page {
	height: 100%;
	background-color: #f4f4f4;
}
.viewport {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 180rpx 0 0;
	position: relative;
}
.cover {
	width: 750rpx;
	height: 225rpx;
	border-radius: 0 0 40rpx 40rpx;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.scroll-view {
	flex: 1;
	overflow: hidden;
}
.tabs {
	display: flex;
	justify-content: space-evenly;
	height: 100rpx;
	line-height: 90rpx;
	margin: 0 20rpx;
	font-size: 28rpx;
	border-radius: 10rpx;
	box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
	color: #333;
	background-color: #fff;
	position: relative;
	z-index: 9;
	.text {
		margin: 0 20rpx;
		position: relative;
	}
	.active {
		&::after {
			content: '';
			width: 40rpx;
			height: 4rpx;
			transform: translate(-50%);
			background-color: #27ba9b;
			position: absolute;
			left: 50%;
			bottom: 24rpx;
		}
	}
}
.goods {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20rpx 20rpx;
	.navigator {
		width: 300rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.thumb {
		width: 300rpx;
		height: 305rpx;
	}
	.name {
		height: 88rpx;
		font-size: 26rpx;
	}
	.price {
		line-height: 1;
		color: #cf4444;
		font-size: 30rpx;
	}
	.symbol {
		font-size: 70%;
	}
	.decimal {
		font-size: 70%;
	}
}

.loading-text {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 0 50rpx;
}
</style>
